<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForms" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="招标需求编号">
        <el-input v-model="queryParams.demandNumber" placeholder="请输入需求编号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['bidding:criteria:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['bidding:criteria:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['bidding:criteria:remove']">删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <div class="balademandList">
      <el-table v-loading="loading" :data="demandList" @selection-change="handleSelectionChange" max-height="434">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="招投标需求编号" fixed="left" width="150" align="center" prop="demandNumber" />
      <el-table-column label="招投标明细" align="center">
        <el-table-column label="采购申请行状态" width="140" align="center">
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                <dict-tag :options="dict.type.demand_line_status" :value="value.demandLineStatus"/>
              </div>
          </template>
        </el-table-column>
        <el-table-column label="采购申请编号" align="center" width="180" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.purchaseRequestNumber}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="行号" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.demandLineNumber}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="采购类型" width="120" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                <dict-tag :options="dict.type.sys_type_purchase" :value="value.typePurchase"/>
              </div>
          </template>
        </el-table-column>
        <el-table-column label="申请日期" width="120" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.applicationDate}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="申请人" width="100" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.personName}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="申请部门" width="120" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.deptName}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="产品编号" width="180" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.pcmMaterialRecord.productNumber}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" width="120" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.pcmMaterialRecord.productName}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                <dict-tag :options="dict.type.sys_unit" :value="value.pcmMaterialRecord.unit"/>
              </div>
          </template>
        </el-table-column>
        <el-table-column label="需求数量" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.requiredQuantity}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="期望到货时间" width="120" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.expectedDeliveryDate}}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="期望供应商" width="150" align="center" >
          <template slot-scope="scope">
              <div v-for="value in scope.row.pcmApplicationDetailList" :key="value.detailId">
                {{value.expectedSupplierName}}
              </div>
          </template>
        </el-table-column>
        </el-table-column>
        <el-table-column label="提交人" fixed="right" align="center" prop="tjr" />
        <el-table-column label="提交时间" fixed="right" width="150" align="center" prop="submitBidDemandTime"/>
        <el-table-column label="更新时间" fixed="right" width="150" align="center" prop="bidDemandUpdateTime"/>
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['bidding:criteria:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['bidding:criteria:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <!-- 申请明细对话框 -->
    <el-dialog :title="textdetail" :visible.sync="applicationdetail" width="848px" >
      <el-form :model="detaiList" ref="queryFormDetail" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="采购申请编号" prop="purchaseRequestNumber">
          <el-input v-model="detaiList.purchaseRequestNumber" placeholder="请输入申请编号" clearable
            @keyup.enter.native="handleQueryDetail" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="detaiList.productName" placeholder="请输入产品名称" clearable
            @keyup.enter.native="handleQueryDetail" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryDetail">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryDetail">重置</el-button>
        </el-form-item>
    </el-form>
      <el-table v-loading="appDetail" @selection-change="applicationDetailChange" :data="tableData" border style="width: 100%" max-height="360">
        <el-table-column type="selection" width="58" align="center" fixed="left"/>
        <el-table-column label="采购申请行状态" width="150" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.demand_line_status" :value="scope.row.demandLineStatus"/>
          </template>
        </el-table-column>
        <el-table-column prop="purchaseRequestNumber" label="采购申请编号" align="center" width="150"/>
        <el-table-column prop="demandLineNumber" label="行号" width="150" align="center"/>
        <el-table-column prop="productNumber" label="产品编号" width="150" align="center"/>
        <el-table-column prop="productName" label="产品名称" width="150" align="center"/>
        <el-table-column label="单位" width="150" align="center">
          <template  slot-scope="scope">
            <dict-tag :options="dict.type.sys_unit" :value="scope.row.unit"/>
          </template>
        </el-table-column>
        <el-table-column prop="requiredQuantity" label="需求数量" width="110" align="center"/>
        <el-table-column prop="expectedDeliveryDate" label="期望到货时间" width="150" align="center"/>
        <el-table-column prop="expectedSupplierName" label="期望供应商" width="150" align="center"/>
      </el-table>
      <pagination v-show="tableDataTotal>0" :total="tableDataTotal" :page.sync="detaiList.pageNum" :limit.sync="detaiList.pageSize"
        @pagination="getMx" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormDetail">确 定</el-button>
        <el-button @click="cancelDetail">取 消</el-button>
      </div>
    </el-dialog>
   

    

    <!-- 添加或修改评标条例对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="770px" append-to-body>
      <el-form ref="form" :label-position="labelPosition" label-width="80px">
        <el-form-item label="招投标需求编号">
          <el-input :disabled="true" v-model="form.demandNumber" placeholder="自动生成无需填写"></el-input>
        </el-form-item>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddPcmEvaluationRule">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeletePcmEvaluationRule">删除
            </el-button>
          </el-col>
        </el-row>
        <div class="pcmDetail">
          <el-table :data="pcmApplicationDetailList"  :row-class-name="rowPcmEvaluationRuleIndex"
            @selection-change="handlePcmEvaluationRuleSelectionChange">
            <el-table-column type="selection" width="78" align="center" />
            <el-table-column label="序号" fixed="left" align="center" prop="index" width="78" />
            <el-table-column label="采购申请行状态" align="left" width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.demandLineStatus==null">
                    暂无数据
                </div>
                <dict-tag v-else :options="dict.type.demand_line_status" :value="scope.row.demandLineStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="采购申请编号" align="left" width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.purchaseRequestNumber==undefined">
                    暂无数据
                </div>
                <span v-else>{{scope.row.purchaseRequestNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column label="行号" align="left" width="150">
              <template  slot-scope="scope">
                <div v-if="scope.row.demandLineNumber==undefined">
                    暂无数据
                </div>
                <span v-else>{{scope.row.demandLineNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品编号" align="center" width="150">
              <template  slot-scope="scope">
                <div v-if="scope.row.productNumber==undefined">
                    暂无数据
                </div>
                <span v-else>{{scope.row.productNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" width="150">
              <template  slot-scope="scope">
                <div v-if="scope.row.productName==undefined">
                    暂无数据
                </div>
                <span v-else>{{scope.row.productName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" width="150">
              <template  slot-scope="scope">
                <div v-if="scope.row.unit==undefined">
                    暂无数据
                </div>
                <dict-tag v-else :options="dict.type.sys_unit" :value="scope.row.unit" style="color: #606266;"/>
              </template>
            </el-table-column>
            <el-table-column label="需求数量" align="center" width="150">
              <template  slot-scope="scope">
                <div v-if="scope.row.requiredQuantity==undefined">
                    暂无数据
                </div>
                <span v-else>{{scope.row.requiredQuantity}}</span>
              </template>
            </el-table-column>
            <el-table-column label="期望到货时间" align="center" width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.expectedDeliveryDate==undefined">
                    暂无数据
                </div>
                <span v-else >{{scope.row.expectedDeliveryDate}}</span>
              </template>
            </el-table-column>
            <el-table-column label="期望供应商" align="center" width="150">
              <template  slot-scope="scope">
                <div v-if="scope.row.expectedSupplierName==undefined">
                    暂无数据
                </div>
                <span v-else>{{scope.row.expectedSupplierName}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listdemand,listDetail,insertDemandMain,getDemandMain,updateDemandMain,delDemandMain
  } from "@/api/bidding/demand";
  import dict from "@/utils/dict";
  export default {
    name: "Criteria",
    dicts: ['pcm_supplier_states','sys_type_purchase','demand_line_status','sys_unit'],
    data() {
      return {
        // 遮罩层
        loading: true,
        appDetail:true,
        labelPosition:"top",
        applicationdetail:false,
        textdetail:"选择数据",
        tableData:[],
        tableDataTotal: 0,
        demandNumber:"",
        mxList:[],
        // 选中数组
        ids: [],
        // 子表选中数据
        checkedPcmEvaluationRule: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 招标需求数据
        demandList: [],
        // 需求池表格数据
        pcmApplicationDetailList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          demandNumber:"",
        },
        detaiList: {
          pageNum: 1,
          pageSize: 5,
          purchaseRequestNumber:'',
          productName:'',
        },
        // 表单参数
        form: {},
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询评标条例列表 */
      getList() {
        this.loading = true;
        listdemand(this.queryParams).then(response => {
          this.demandList = response.rows
          this.total=response.total
          this.loading = false;
        });
      },
      cancelDetail(){
        this.appDetail=false;
        this.pcmApplicationDetailList = [];
        this.applicationdetail=false;
      },
      submitFormDetail(){
        this.mxList.map(item=>{
          item.demand_detail_id = 0;
        })
        this.pcmApplicationDetailList = this.pcmApplicationDetailList.concat(this.mxList);
        this.appDetail=false;
        this.applicationdetail=false;
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.pcmApplicationDetailList = [];
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      handleQueryDetail() {
        this.detaiList.pageNum = 1;
        this.getMx();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.demandNumber=null;
        this.handleQuery();
      },

      resetQueryDetail() {
        this.resetForm("queryFormDetail");
        this.handleQueryDetail();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => Number(item.projectID))
        console.info(this.ids);
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.pcmApplicationDetailList=[];
        this.title = "创建招投标需求";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const projectID = row.projectID || this.ids[0]
        this.form.projectID=projectID;
        getDemandMain(projectID).then(response => {
          this.form.demandNumber = response.rows[0].demandNumber;
          this.pcmApplicationDetailList = response.rows;
          this.open = true;
          this.title = this.form.demandNumber;
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.form.listDetailIds = this.pcmApplicationDetailList.map(item=>item.detail_id);
        let dNumber = this.form.demandNumber;
        if (dNumber!=null&&dNumber!=undefined&&dNumber!="") {
          this.form.pcmApplicationDetailList = this.pcmApplicationDetailList;
          updateDemandMain(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        } else {
          this.form.projectStatus=0;
          insertDemandMain(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const projectID = Number(row.projectID) || this.ids;
        this.$modal.confirm('是否确认删除评标条例编号为"' + projectID + '"的数据项？').then(function() {
          return delDemandMain(projectID);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 评标规则序号 */
      rowPcmEvaluationRuleIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
      /** 评标规则添加按钮操作 */
      handleAddPcmEvaluationRule() {
        this.applicationdetail=true;
        this.getMx();
      },

      getMx(){
        this.appDetail = true;
        listDetail(this.detaiList).then(response=>{
          this.tableData = response;
          this.tableDataTotal = response.length;
          this.appDetail = false;
        })
      },
      /** 采购明细删除按钮操作 */
      handleDeletePcmEvaluationRule() {
        if (this.checkedPcmEvaluationRule.length == 0) {
          this.$modal.msgError("请先选择要删除的评标规则数据");
        } else {
          const pcmApplicationDetail = this.pcmApplicationDetailList;
          const cpelr = this.checkedPcmEvaluationRule;
          this.pcmApplicationDetailList = pcmApplicationDetail.filter(function(item) {
            return cpelr.indexOf(item.index) == -1;
          });
        }
        console.info(this.pcmApplicationDetailList);
      },
      /** 复选框选中数据 */
      handlePcmEvaluationRuleSelectionChange(selection) {
        this.checkedPcmEvaluationRule = selection.map(item => item.index)
      },

      /** 明细复选框选中数据 */
      applicationDetailChange(selection) {
        this.mxList = selection;
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('bidding/criteria/export', {
          ...this.queryParams
        }, `criteria_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>

<style scoped>
  ::v-deep .el-table thead.is-group th.el-table__cell{
    height: 20px;
  }

  ::v-deep .el-dialog__body{
    border-bottom: 1px solid #EBECEE;
  }

  ::v-deep .el-table--medium .el-table__cell{
    padding: 4px 0px;
  }
  ::v-deep .cell{
    padding: 0px;
  }
  ::v-deep .balademandList .cell div{
    padding: 2px 0px;
    border-bottom:1px solid #DFE6EC;
    height: 55px;
    display: flex;
    align-items: center; /* 将项目在交叉轴上居中对齐 */
    justify-content: center; /* 将项目在主轴上居中对齐（水平居中） */
  }
  ::v-deep .cell div:nth-last-child(1){
    border-bottom: 0px;
    padding: 4px 0px 0px 0px;
  }
  .fx-field .field-label .field-name{
    overflow: hidden;
  }
  ::v-deep .el-form--label-top .el-form-item__label{
    padding: 0;
  }
  ::v-deep .el-form-item--medium .el-form-item__content .el-input.is-disabled .el-input__inner{
    border: 0px;
    width: 354px;
    height: 32px;
    cursor: default;
  }
  ::v-deep .el-dialog__body .el-form-item__label{
    font-weight: bolder;
  }
  ::v-deep .el-table--border .el-table__cell:first-child .cell{
    padding: 0;
  }
  ::v-deep .el-table td.el-table__cell div .el-input--medium .el-input__inner{
    border: 0px;
    background-color: #F7F9FB;
  }
  ::v-deep .pcmDetail .cell div{
    text-align: left;
    margin-left: 12px;
    color: #B5B8BE;
  }
  ::v-deep .el-dialog__header{
    border-bottom:1px solid #EBECEE;
  }
</style>
